<template>
    <div class="el-breadcrumb">
      <el-tag
          v-for="tag in tags"
          :key="tag.name"
          closable
          :path="tag.path"
          type="info"
          @click="goPage(tag.path)"
          @close="handleClose(tag)">
        {{tag.name}}
      </el-tag>
    </div>
</template>

<script>
    export default {
      name: "TheBreadCrumb",
      data() {
        return {
          tags: [
            { name: '', path: '' },
          ],
          color:'green'
        };
      },
      methods:{
        handleClose(tag) {
          const index = this.tags.indexOf(tag)
          this.tags.splice(index, 1);
          this.$router.push(this.tags[index-1].path)
        },
        goPage(path){
          this.$router.push(path)
          this.color = 'red'
        }
      },
      created() {

        const breadlist = this.$store.getters.getBreadList
        this.tags = breadlist
      },
    }
</script>

<style scoped>
    .el-breadcrumb {
        margin-left: 200px;
        /*padding-top: 3px;*/
    }


    i {
      float: right;
      line-height: 50px;
      text-align: center;
      margin-top: 15px;
    }
    .el-tag{
      height: 40px;
      font-size: 15px;
      margin-top: 5px;
      margin-right: 10px;
      line-height: 40px;
    }

    >>>.el-tag .el-icon-close{
      font-size: 15px;
    }
</style>
